<template>
  <!-- 培训课程列表 -->
  <view class="qy-com-learn-course">
    <view class="search-bar flex-center flex-middle">
      <van-search type="text" v-model="inputSearchValue" class="search-input" placeholder="请输入搜索关键词" confirm-type="search" @confirm="searchList" />
      <text class="font-btn" @click="showAction = true">筛选</text>
    </view>
    <view class="list-wrap" :class="{'full-wrap': props.fullStatus}">
      <van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="loadMore" >
        <CourseList :list="courseList" vertical progress isMine></CourseList>
      </van-list>
    </view>
    <van-action-sheet v-model="showAction">
      <view class="action-content">
        <view class="default-title">学习状态</view>
        <CustomSelect v-model="studyStatus" :options="studyStatusOptions" ></CustomSelect>
        <view v-if="studyStatus[0] && studyStatus[0] == '3,5'">
          <view class="default-title mt20">课程状态 <span class="default-desc">可多选</span></view>
          <CustomSelect v-model="courseDoneValue" multiple :options="courseDoneOptions" ></CustomSelect>
        </view>
        <!-- <view class="default-title mt20">课程类型 <span class="default-desc">可多选</span></view>
        <CustomSelect v-model="courseType" multiple :options="courseTypeOptions" ></CustomSelect> -->
        <view class="default-title mt20">选修类型</view>
        <CustomSelect v-model="courseRegValue" :options="courseRegOptions" ></CustomSelect>
        <view class="mt20 dropdown-custom-bottom-btn">
          <button class="cancel-btn" round @click="onReset">重置筛选</button>
          <button type="primary" round @click="searchList">确认</button>
        </view>
      </view>
    </van-action-sheet>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, getCurrentInstance } from 'vue';
import VanList from "@/components/vant/van-list/van-list.vue";
import VanSearch from "@/components/vant/van-search/van-search.vue";
import CourseList from '@/components/course/CourseList.vue';
import CustomSelect from '@/components/common/CustomSelect.vue';
import VanActionSheet from "@/components/vant/van-action-sheet/van-action-sheet.vue";
import {parse, stringify} from "@/assets/js/util";
import mockData from "@/mock/index/configData.json"
const {$api,$toast} = getCurrentInstance().proxy
const doneValue = '3,5'
const inputSearchValue = ref('');
const courseList = ref([]);
const studyStatus = ref([]);
const studyStatusOptions = ref([
  { name: '全部', value: '' },
  { name: '未开始', value: '1' },
  { name: '学习中', value: '2' },
  { name: '已学完', value: '3,5' }
]);
const courseDoneValue = ref(['3', '5']);
const courseDoneOptions = ref([
  { name: '未通过', value: '3' },
  { name: '已通过', value: '5' },
]);
const courseRegValue = ref([]);
const courseRegOptions = ref([
  { name: '必修', value: '1' },
  { name: '选修', value: '2' },
]);
const listLoading = ref(false);
const listFinished = ref(false);
const showAction = ref(false);

const courseSearch = ref({});
const courseType = ref([]);
const pageLoading = ref(null);
const page = ref({
  pageNumber: 1,
  pageSize: 6
})

const props = defineProps({
  fullStatus: { // 列表铺满
    type: Boolean,
    default: false
  }
});

onMounted(() => {
  getCourseList();
});

const getCourseList = (loadNew = false) => {
	if(loadNew) return;
   courseList.value = courseList.value.concat(mockData.courseDtata || []);
   listFinished.value=true;
};
const loadMore = () => {
  if (!listFinished.value) {
    getCourseList()
  }
}
const onReset = () => {
  showAction.value = false
  getCourseList(true);
};
const searchList = () => {
		showAction.value = false
		getCourseList(true)  
};


</script>

<style lang="scss" scoped>
.qy-com-learn-course {
     .search-bar {
        display: flex;
        align-content: center;
        padding: 5px 0;
        :deep(.van-search) {
            width: 88%;
        }
    }
    .list-wrap {
        min-height: 95vh;
        overflow: auto;
        padding: 0 15px 15px;
        :deep(.list-wrapper) {
            .list-item:first-child {
                padding-top: 5px;
            }
        }
        &.full-wrap{
          height: calc(100vh - 55px);
        }
    }
    .action-content {
        padding: 25px 20px 40px;
        .default-title {
            margin-bottom: 8px;
        }
    }
}
</style>